<template>
  <div>
    <van-index-bar :index-list="indexList"
                   @select="selectindex">
      <div v-for="(item,index) in SelectLocation"
           :key="item.index">
        <div v-if="!item.isflex">
          <van-index-anchor :index="indexList[index]">{{item.title}}</van-index-anchor>
          <van-cell v-for="(i,Index) in item.cities"
                    :key="Index"
                    @click="slectCity(i)">{{i}}</van-cell>
        </div>
        <div v-else>
          <van-index-anchor :index="indexList[index]">{{item.title}}</van-index-anchor>
          <van-cell class="kflex">
            <p v-for="(i,Index) in item.cities"
               :key="Index"
               @click="slectCity(i)">{{i}}</p>
          </van-cell>
        </div>
      </div>
    </van-index-bar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      indexList: ['定位', '最近', '热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'],
      SelectLocation: [
        {
          isflex: true,
          title: '定位',
          cities: ['定位失败，请点击重试']
        },
        {
          isflex: true,
          title: '最近',
          zuijin: true,
          cities: ['长沙']
        },
        {
          isflex: true,
          title: '热门',
          cities: ['上海', '北京', '广州', '深圳', '武汉', '天津', '西安', '南京', '杭州', '成都', '重庆']
        },
        {
          isflex: false,
          title: 'A',
          cities: ['阿拉善盟', '鞍山', '安庆', '安阳', '阿坝', '阿里', '安顺', '安康', '阿勒泰', '阿克苏', '安吉', '安丘', '安岳', '安平', '安宁', '安溪', '安化', '阿勒泰市', '安福', '阿荣旗', '安陆市', '安州市', '阿城区']
        },
        {
          isflex: false,
          title: 'B',
          cities: [
            '北京',
            '保定',
            '蚌埠',
            '包头',
            '本溪',
            '巴彦江',
            '白城',
            '白山',
            '毫州',
            '滨州',
            '巴中',
            '北海',
            '百色',
            '毕节',
            '保山',
            '宝鸡',
            '白银',
            '巴州',
            '薄塔拉',
            '霸州',
            '滨海',
            '宝应',
            '北流',
            '博爱'
          ]
        },
        {
          isflex: false,
          title: 'C',
          cities: [
            '重庆',
            '成都',
            '长沙',
            '常州',
            '长春',
            '沧州'
          ]
        },
        {
          isflex: false,
          title: 'D',
          cities: [
            '大连',
            '东莞',
            '大庆',
            '大同',
            '丹东',
            '大兴安岭',
            '东营',
            '德州',
            '德阳'
          ]
        },
        {
          isflex: false,
          title: 'E',
          cities: [
            '鄂尔多斯',
            '鄂州',
            '恩施',
            '峨眉山',
            '额尔古纳',
            '恩平',
            '客额敏县'
          ]
        },
        {
          isflex: false,
          title: 'F',
          cities: [
            '福州',
            '佛山',
            '抚顺',
            '阜新',
            '阜阳',
            '抚州',
            '防城港',
            '涪陵',
            '富阳',
            '福清',
            '凤凰',
            '肥城',
            '阜宁',
            '奉化'
          ]
        },
        {
          isflex: false,
          title: 'G',
          cities: [
            '广州',
            '桂林',
            '贵阳',
            '赣州',
            '广元',
            '广安',
            '贵港',
            '甘孜',
            '甘南',
            '固原',
            '巩义',
            '桂平',
            '高邮'
          ]
        },
        {
          isflex: false,
          title: 'H',
          cities: [
            '杭州',
            '合肥',
            '葫芦岛',
            '海口',
            '哈尔滨',
            '邯郸',
            '呼和浩特',
            '衡水',
            '衡阳'

          ]
        },
        {
          isflex: false,
          title: 'J',
          cities: [
            '锦州',
            '焦作',
            '晋城',
            '晋中',
            '多',
            '佳木斯',
            '金华',
            '吉安'
          ]
        },
        {
          isflex: false,
          title: 'K',
          cities: [
            '昆明',
            '开封',
            '昆山',
            '喀什地区',
            '克拉玛依',
            '凯里',
            '开平',
            '库尔勒',
            '奎屯',
            '开州区',
            '垦利',
            '宽城',
            '开阳',
            '开化',
            '康县',
            '昆玉市'
          ]
        },
        {
          isflex: false,
          title: 'L',
          cities: [
            '廊坊',
            '临汾',
            '吕梁',
            '辽阳',
            '辽源',
            '连云港',
            '六安',
            '丽水',
            '龙岩',
            '洛阳',
            '聊城',
            '临沂',
            '莱芜',
            '漯河'
          ]
        },
        {
          isflex: false,
          title: 'M',
          cities: [
            '牡丹江',
            '马鞍山',
            '茂名',
            '梅州',
            '绵阳',
            '眉山',
            '密山',
            '漠河',
            '满洲里',
            '明光',
            '梅河口',
            '汨罗',
            '孟州',
            '麻城'
          ]
        },
        {
          isflex: false,
          title: 'N',
          cities: [
            '宁波',
            '南京',
            '南昌',
            '南通',
            '南宁',
            '宁德',
            '南平',
            '南阳',
            '内江',
            '南充',
            '怒江',
            '那曲',
            '南沙',
            '宁海'

          ]
        },
        {
          isflex: false,
          title: 'P',
          cities: [
            '盘锦',
            '莆田',
            '萍多',
            '平顶山',
            '濮阳',
            '攀枝花',
            '普洱',
            '平凉',
            '邳州',
            '普宁',
            '平湖',
            '平度',
            '彭州',
            '蓬莱区',
            '鄱阳'
          ]
        },
        {
          isflex: false,
          title: 'Q',
          cities: [
            '青岛',
            '泉州',
            '齐齐哈尔',
            '秦皇岛',
            '七台河',
            '衢州',
            '清远',
            '钦州',
            '黔西南',
            '曲靖',
            '黔东南',
            '黔南',
            '庆阳',
            '迁安',
            '琼海',
            '曲阜'
          ]
        },
        {
          isflex: false,
          title: 'R',
          cities: [
            '日照',
            '日喀则',
            '仁怀',
            '瑞安',
            '如皋',
            '荣成',
            '乳山',
            '汝州',
            '瑞金',
            '瑞昌',
            '仁寿',
            '任丘',
            '任泽区',
            '如东',
            '汝阳'

          ]
        },
        {
          isflex: false,
          title: 'S',
          cities: [
            '上海',
            '深圳',
            '沈阳',
            '石家庄',
            '苏州',
            '三亚',
            '汕头',
            '朔州'
          ]
        },
        {
          isflex: false,
          title: 'T',
          cities: [
            '天津',
            '太原',
            '唐山',
            '通辽',
            '铁岭',
            '通化',
            '台州',
            '泰州',
            '铜陵',
            '泰安',
            '铜仁',
            '铜川',
            '天水',
            '塔城',
            '吐鲁番'

          ]
        },
        {
          isflex: false,
          title: 'W',
          cities: [
            '无锡',
            '武汉',
            '芜湖',
            '温州',
            '乌海',
            '乌兰察布',
            '威海',
            '潍坊',
            '梧州',
            '渭南',
            '武威',
            '乌鲁木齐',
            '昊忠',
            '武夷山'

          ]
        },
        {
          isflex: false,
          title: 'X',
          cities: [
            '西安',
            '厦门',
            '新乡',
            '徐州',
            '邢台',
            '忻州'
          ]
        },
        {
          isflex: false,
          title: 'Y',
          cities: [
            '烟台',
            '阳泉',
            '运城',
            '营口',
            '延边',
            '伊春',
            '盐城',
            '鹰潭'
          ]
        },
        {
          isflex: false,
          title: 'Z',
          cities: [
            '郑州',
            '淄博',
            '珠海',
            '中山',
            '张家口',
            '舟山'

          ]
        }
      ]
    }
  },
  created () {
    this.SelectLocation.forEach((el, index) => {
      // 找到最近模块
      if (el.zuijin) {
        el.cities = localStorage.RSC.split(',')
      }
    })
  },
  methods: {
    selectindex () {
      console.log('tab')
    },
    slectCity (city) {
      this.SelectLocation.forEach((el, index) => {
        // 找到最近模块
        if (el.zuijin) {
          // 最近的城市列表有用户选择的城市，且长度等于二或三时
          if (el.cities.indexOf(city) !== -1 && el.cities.length === 2 | 3) {
            const index = el.cities.indexOf(city)
            el.cities.splice(index, 1)
            el.cities.unshift(city)
            // 开头插入元素，删除最后元素
          } else if (el.cities.length >= 3) {
            el.cities.unshift(city)
            el.cities.pop()
            // 长度小于3，添加元素
          } else {
            el.cities.unshift(city)
          }
          localStorage.RSC = el.cities
          console.log(localStorage.RSC)
          console.log(el.cities)
        }
      })
      this.$store.commit('homeStore/updateCity', city)
      console.log(this.$store.state.homeStore.NowCity)
      this.$router.go(-1)
    }
  }

}
</script>
<style lang="scss" scoped>
.van-index-bar {
  /deep/ .van-index-bar__sidebar {
    height: 540px;
    justify-content: space-between;
  }
  .van-cell::after {
    border-bottom: 1px solid #b7bbc0;
  }
  .kflex {
    background-color: #f9f9f9;
    .van-cell__value {
      display: flex;
      flex-wrap: wrap;
      p {
        height: 33px;
        color: #333;
        margin: 10px 0 0 14.7px;
        padding: 0 40px;
        line-height: 33px;
        background-color: #fff;
      }
    }
  }
}
</style>
